<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>19盒子模型的练习</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .btn {
            display: inline-block;
            height: 25px;
            width: 70px;
            background-color: #FF0F23;
            line-height: 25px;
            text-align: center;
            border-radius: 13px;
            color: aliceblue;
        }

        .new {
            background-color: #e1251b;
            color: #fff;
        }

        .btn:hover {
            background-color: #c81623;
            color: #fff;
        }

        .vip {
            background-color: #363634;
            color: #e5d790;
        }

        .hot {
            display: inline-block;
            height: 34px;
            width: 110px;
        }
    </style>
</head>

<body>
    <a class="btn new" href="http://www.jd.com">新人福利</a>
    <a class="btn vip" href="http://www.jd.com">PLUS会员</a>
    <a class="hot" href="http://www.jd.com">精选热点</a>
</body>

</html>